{% extends "index/index.html" %}
<!--{% block title %}Möwe - Funk{% endblock %}-->
{% load static %}


{% block content %}
<div style="border-width:5px;border-style:solid;" class="border-info rounded">
    <iframe src="{% url 'funk:history' %}" width="100%" height="500em" loading="lazy" style="border-style:none;"></iframe>
    
    <form action="{% url 'funk:add' %}" method="post">
        {% csrf_token%}
        <!-- 2 selects for available  -->
        <div class="form-row mx-auto" style="position: relative;">
            <input type="text" placeholder="Sender" name="from" autocomplete="off" class="inputUser col-4 col-md-2">
            <input type="text" placeholder="Empfänger" name="to" autocomplete="off" class="inputUser col-4 col-md-2">
            <input type="text" placeholder="Nachricht" name="message" autocomplete="off" class="col-12 col-md-8">
            <input type="submit" style="display:none"/>
        </div>
    </form>
</div>
{% if error_message %}
    <br>
    <div class="alert alert-danger" role="alert">
        {{ error_message }}
    </div>
{% endif %}

<script>
var users = {{ users|safe }};
autocomplete(document.getElementsByClassName("inputUser")[0], users);
autocomplete(document.getElementsByClassName("inputUser")[1], users);
</script>
{% endblock %}

{% block additionalJS %}
<script src="{% static 'funk/scripts/autocomplete.js' %}"></script>
{% endblock %}

{% block additionalCSS %}
<link rel="stylesheet" type="text/css" href="{% static 'funk/style.css' %}">
{% endblock %}
